<template>
    <el-card shadow="never" class="border-0">
        <!-- 搜索 -->
        <Search :model="searchForm"  @search="getData" @reset="resetSearchForm">
            <SearchItem label="关键词">
                <el-input v-model="searchForm.keyword" placeholder="手机号/邮箱/会员昵称" clearable></el-input>
            </SearchItem>
            <template #show>
                <SearchItem label="会员等级">
                    <el-select v-model="searchForm.user_level_id" placeholder="请选择会员等级" clearable>
                        <el-option v-for="item in userLevel"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                    
                </SearchItem>
            </template>
        </Search>
        <!-- 新增、刷新 -->
        <ListHeader layout="create,refresh" @create="handleCreate" @refresh="getData"/>
        <el-table :data="tableData" stripe style="width: 100%" v-loading="loading">
            <el-table-column label="管理员" width="200">
                <template #default="{ row }">
                    <div class="flex items-center ">
                        <el-avatar :size="50" :src="row.avatar">
                            <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png" />
                        </el-avatar>
                        <div class="ml-3">
                            <h6>{{ row.username }}</h6>
                            <small>ID:{{ row.id }}</small>
                        </div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="会员等级" align="center">
                <template #default="{ row }">
                    {{ row.user_level?.name || "-" }}
                </template>
            </el-table-column>
            <el-table-column label="登录注册" align="center">
                <template #default="{ row }">
                   <p v-if="last_login_time">
                        最后登录：{{ row.last_login_time }}
                   </p>
                   <p>
                        注册时间：{{ row.create_time }}
                   </p>
                </template>
            </el-table-column>
            <el-table-column label="状态" width="120">
                <template #default="{ row }">
                    <el-switch :modelValue="row.status" :active-value="1" :inactive-value="0"
                        @change="handleStatusChange($event, row)" :loading="row.statusLoading"
                        :disabled="row.super == 1">
                    </el-switch>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="180" align="center">
                <template #default="scope">
                    <samp class="text-sm text-gray-500" v-if="scope.row.super == 1">暂无操作</samp>
                    <div v-else>
                        <el-button type="primary" size="samll" text @click="handleEdit(scope.row)">修改</el-button>
                        <el-popconfirm title="是否要删除该用户？" confirm-button-text="确定" cancel-button-text="取消"
                            @confirm.stop="handleDelete(scope.row.id)">
                            <template #reference>
                                <el-button text type="primary" size="small">删除</el-button>
                            </template>
                        </el-popconfirm>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <div class="flex items-center justify-center mt-5">
            <el-pagination background layout="prev,pager, next" :total="total" :current-page="currentPage"
                :page-size="limit" @current-change="getData" />
        </div>
    </el-card>
    <FormDrawer ref="formDrawerRef" :title="drawerTitle" @submit="handleSubmit">
        <el-form :model="form" ref="formRef" :rules="rules" label-width="80px" :inline="false">
            <el-form-item label="用户名" prop="username">
                <el-input v-model="form.username" placeholder="用户名"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input v-model="form.password" placeholder="密码" type="password"></el-input>
            </el-form-item>
            <el-form-item label="昵称" prop="nickname">
                <el-input v-model="form.nickname" placeholder="昵称"></el-input>
            </el-form-item>
            <el-form-item label="头像">
                <ChooseImage v-model="form.avatar" preview :limit="1"/>
            </el-form-item>
            <el-form-item label="会员等级">
                <el-select v-model="form.user_level_id" placeholder="请选择会员等级" clearable>
                        <el-option v-for="item in userLevel"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
            </el-form-item>
            <el-form-item label="手机" prop="phone">
                <el-input v-model="form.phone" placeholder="手机"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
                <el-input v-model="form.email" placeholder="邮箱"></el-input>
            </el-form-item>
            <el-form-item label="状态">
                <el-switch v-model="form.status" :active-value="1" :inactive-value="0" @change="">
                </el-switch>
            </el-form-item>
        </el-form>
    </FormDrawer>
</template>

<script setup>
import { computed, reactive, ref } from "vue"
import { getUserList, editUserStatus, deleteUser, editUser, createUser} from "~/api/user.js"
import { toast } from "~/composables/util.js"
import FormDrawer from "~/components/FormDrawer.vue";
import ChooseImage from "~/components/image/ChooseImage.vue";
import ListHeader from "~/components/ListHeader.vue";
import Search from "~/components/Search.vue"
import SearchItem from "~/components/SearchItem.vue"
import { useInitTab, useInitForm } from "~/composables/useCommon";
const userLevel = ref([]);
const { searchForm, resetSearchForm, tableData, loading, currentPage, total, limit, getData, handleStatusChange } = useInitTab({
    searchForm: {
        keyword: "",
        user_level_id:null
    },
    getList: getUserList,
    onGetListSuccess: (res) => {
        tableData.value = res.list.map((o) => {
            o.statusLoading = false;
            return o;
        });
        total.value = res.totalCount;
        userLevel.value = res.user_level
    },
    updateStatus:editUserStatus
});

const { formDrawerRef, formRef, form, drawerTitle, rules, handleSubmit, handleCreate, handleEdit, handleDelete } = useInitForm({
    form: {
        username: "",
        password: "",
        user_level_id: null,
        status: 1,
        avatar: "",
        nickname:"",
        phone:"",
        email:""
    },
    rules:{
    username: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
    password: [{ required: true, message: "密码不能为空", trigger: "blur" }],
    },
    loading,
    getData,
    edit: editUser,
    create: createUser,
    delete: deleteUser
});



</script>

<style>

</style>